<template>
  <div>
    <Panel :title="`当前订单状态：${statusList[status] || ''}`" useBack>
    <div slot="ext" :class="$style.examine">
      <div class="adopt" @click="()=>remark()">备注订单</div>
    </div>
    <template slot="body">
      <p :class="$style.h1" style="margin-top:0">订单信息</p>
      <el-table :data="orderInfo" border style="width: 100%;">
        <el-table-column prop="code" label="订单编号" align="center"></el-table-column>
        <el-table-column label="提交时间" align="center">
          <template slot-scope="scope">
            {{scope.row.createTime | moment}}
          </template>
        </el-table-column>
        <el-table-column label="预约到店日期" align="center">
          <template slot-scope="scope">
            {{scope.row.appointmentDate | day}}
          </template>
        </el-table-column>
      </el-table>
      <p :class="$style.h1">门店信息</p>
      <el-table :data="shoreInfo" border style="width: 100%;">
        <el-table-column prop="storeName" label="门店名称" align="center"></el-table-column>
        <el-table-column prop="storeAddress" label="门店地址" align="center"></el-table-column>
        <el-table-column prop="storePhone" label="门店联系电话" align="center"></el-table-column>
      </el-table>
      <p :class="$style.h1">车主信息</p>
      <el-table :data="carMasterInfo" border style="width: 100%;">
        <el-table-column label="车主头像" align="center">
          <template slot-scope="scope">
            <div>
              <el-image
                style="width: 100px; height: 100px"
                :preview-src-list="[scope.row.userHeader]"
                :src="scope.row.userHeader"
              ></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="车主昵称" align="center"></el-table-column>
        <el-table-column prop="userPhone" label="手机号码" align="center"></el-table-column>
      </el-table>

      <p :class="$style.h1">车辆信息</p>
      <el-table :data="carInfoList" border style="width: 100%;">
        <!-- <el-table-column prop="modelName" label="车型" align="center"></el-table-column> -->
        <el-table-column prop="carNum" label="车牌号" align="center"></el-table-column>
        <el-table-column prop="exFactory" label="车辆出厂日期" align="center">
          <template slot-scope="scope">
            {{scope.row.exFactory}}年
          </template>
        </el-table-column>
        <el-table-column prop="kilometers" label="车辆行驶里程" align="center">
          <template slot-scope="scope">
            {{scope.row.kilometers}}公里
          </template>
        </el-table-column>
      </el-table>

      <p :class="$style.h1" v-if="diagnosticInfo.length !== 0">诊断信息</p>
      <el-table  v-if="diagnosticInfo.length !== 0" :data="diagnosticInfo" border style="width: 100%;">
        <el-table-column label="诊断方法" align="center">
          <template slot-scope="scope">
            {{scope.row.diagnosticMethod | diagnosticMethodFilter}}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="smokePm" label="烟度PM(100%)" align="center"></el-table-column>
        <el-table-column prop="nox" label="氮氧化物NOx" align="center"></el-table-column> -->

        <el-table-column
          v-for="item of thresholdSet"
          :key="item.key"
          :prop="item.key"
          :label="`${item.label}`"
          align="center">
          <template slot-scope="scope">
            {{scope.row[item.keyC]}}
            {{item.unit}}
          </template>
        </el-table-column>

        <el-table-column prop="diagnosticResult" label="诊断结果" align="center"></el-table-column>
      </el-table>
      <p :class="$style.h1">评价信息</p>
      <el-table :data="commentInfo" border style="width: 100%;">
        <el-table-column prop="createTime" label="评价时间" align="center">
          <template slot-scope="scope">
            {{scope.row.createTime | moment}}
          </template>
        </el-table-column>
        <el-table-column prop="score" label="评分" align="center"></el-table-column>
        <el-table-column prop="content" label="评价内容" align="center"></el-table-column>

        <el-table-column label="评价图片" align="center">
          <template slot-scope="scope">
            <div>
              <el-image
                v-for="(item, index) of scope.row.imgUrl"
                :key="index"
                style="width: 100px; height: 100px;margin-right: 20px"
                :preview-src-list="[item]"
                :src="item"
              ></el-image>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <p :class="$style.h1">操作信息</p>
      <el-table :data="operationInfo" border style="width: 100%;">
        <el-table-column prop="operateUserName" label="操作人" align="center"></el-table-column>
        <el-table-column label="操作时间" align="center">
          <template slot-scope="scope">
            {{scope.row.createTime | moment}}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">
            {{scope.row.status | statusFromat}}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
      </el-table>
    </template>
  </Panel>
  
  
    <ModalPanel 
      :visible='visible'
      title="备注订单"
      :onCancel="onCancel"
      :class="$style.bannerDialog"
      :onOk="onSubmit">
      <div>
        <ModifyForm
          :hiddenBtn='true'
          :editColumn='editColumn'
          :updateData="updateData"
          labelWidth='80px'
          ref="configModal"
          :class="$style.ModifyForm">

        </ModifyForm>
      </div>
    </ModalPanel>
  </div>
  
</template>
<script>
import Panel from "@/components/Panel";
import ModalPanel from "@/components/ModalPanel";
import ModifyForm from "@/components/ModifyForm";
import { POST, GET } from '@/tools'
import moment from 'moment'
const methodEM = {
  1: "加载减速法",
  2: "自由加速法",
  3: "简易瞬态工况法",
  4: "低怠速法",
  5: "稳态工况法-ASM5025",
  6: "稳态工况法-ASM2540",
  7: "高怠速法",
};
export default {
  components: {
    Panel,
    ModalPanel,
    ModifyForm
  },
  filters: {
    day(val){
      return moment(val).format('YYYY-MM-DD')
    },
    diagnosticMethodFilter(val) {
      return methodEM[val];
    },
    statusFromat(val){
      if(val === 1){
        return "待接单"
      }else if(val === 2){
        return "待接车"
      }else if(val === 3){
        return "维修中"
      }else if(val === 4){
        return "维修完成"
      }else if(val === 5){
        return "待评价"
      }else if(val === 6){
        return "已关闭"
      }else if(val === 7){
        return "已完成"
      }
    }
  },
  data() {
    return {
      statusList: {
        1: '待接单',
        2: '待接车',
        3: '维修中',
        4: '维修完成',
        5: '待评价',
        6: '已关闭',
        7: '已完成'
      },
      editColumn: [
        {
          name: "操作备注",
          prop: "remark",
          type: "textarea",
          required: true,
          width: 24
        },
      ],
      status: 0,
      visible: false,
      orderInfo: [],
      shoreInfo: [],
      carMasterInfo: [],
      carInfo: [],
      diagnosticInfo: [],
      commentInfo: [],
      operationInfo: [],
      id: '',
      code: '',
      carInfoList: [],
      thresholdSet: []
    };
  },
  created() {
    this.queryData(this.$route.query.id)
  },
  methods: {
    async fetchAddAndUnit(methodsId, type){
      const result = await GET(`/threshold/setAndUnit/${type}`)

      let item = result.find(item => item.methodId == methodsId)

      this.thresholdSet = item.thresholdSet
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    onCancel(){
      this.visible = false
    },
    remark() {
      this.visible=true
    },
    async updateData(values){
      await POST('/order/remark', {
        ...values,
        id: this.$route.query.id,
        code: this.code
      })
      this.$message.success('备注成功')
      this.visible = false
    },
    async queryData(id){
      let result = await GET(`/order/${id}`)
      this.fetchAddAndUnit(result.orderDiagnosisVO.diagnosticMethod,result.orderDiagnosisVO.carType)
      this.code = result.code
      this.status = result.status
      this.orderInfo = [{
        code: result.code,
        createTime: result.createTime,
        appointmentDate: result.appointmentDate
      }]
      this.shoreInfo = [{
        storeName: result.storeName,
        storeAddress: result.storeAddress,
        storePhone: result.storePhone,
      }]
      this.carMasterInfo = [{
        userHeader: result.userHeader,
        nickName: result.nickName,
        userPhone: result.userPhone,
      }]


      this.carInfoList = [{
        carNum: result.carNum,
        code: result.code,
        kilometers: result.kilometers,
        exFactory: result.exFactory
      }]
      this.diagnosticInfo = result.orderDiagnosisVO ? [result.orderDiagnosisVO] : []
      this.commentInfo = result.orderEvaluateVO?[result.orderEvaluateVO]:[]
      this.operationInfo = result.orderLogs || []
    }
  }
};
</script>

<style  lang='scss' module>
.h1 {
  background: #eee;
  padding: 0 10px;
  color: #555;
  line-height: 60px;
  margin-top: 60px;
}
.examine {
  display: flex;
  align-items: center;
  :global {
    div {
      color: #fff;
      padding: 10px;
      margin: 0 10px;
      border-radius: 2px;
      font-size: 14px;
      cursor: pointer;
      min-width: 60px;
      text-align: center;
    }
    .adopt {
      background: #409eff;
    }
  }
}
</style>